<template>
  <div class="add" @click="emit('add-bookmark')" title="添加图标" :style="addCardStyle">
    <span class="plus">+</span>
  </div>
</template>
<script setup lang="ts">
import { computed } from 'vue';
import { useSettings } from '../../core/store/useSettings';

const emit = defineEmits<{ (e:'add-bookmark'): void }>();
const settings = useSettings();

const addCardStyle = computed(() => {
  const iconPx = settings.settings?.iconPx ?? (settings.settings?.iconSize==='sm'?36: settings.settings?.iconSize==='lg'?60:48);
  const radiusPx = settings.settings?.radius ?? 12;
  const size = Math.max(iconPx + 24, 64); // 最小64px，但会随图标大小调整
  return {
    width: `${size}px`,
    height: `${size}px`,
    borderRadius: `${radiusPx}px`
  };
});
</script>
<style scoped>
.add{ display:flex; align-items:center; justify-content:center; background: rgba(17,24,39,.5); border:1px solid var(--border); backdrop-filter: blur(4px); cursor:pointer; transition:transform .15s ease, box-shadow .15s ease }
.add:hover{ transform: translateY(-1px); box-shadow: 0 10px 24px rgba(0,0,0,.45) }
.plus{ font-size:22px; color:#cbd5e1 }
:host-context([data-theme='light']) .add{ background: rgba(255,255,255,.85); border-color: rgba(0,0,0,.08) }
</style>
